<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./css/reset.css" />
    <style>
      .news-list {
        width: 318px;
      }

      .news-list .news-list-item a {
        display: flex;
        align-items: center;
        padding: 6px 0;
      }

      .news-list .news-list-item a:hover p {
        color: #f04142;
      }

      .news-list .news-list-item .order {
        margin-right: 8px;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        color: #a1a3a6;
      }

      .news-list .news-list-item:first-child .order {
        color: #ff403a;
      }

      .news-list .news-list-item:nth-child(2) .order {
        color: #ff9500;
      }

      .news-list .news-list-item:nth-child(3) .order {
        color: #fc0;
      }

      .news-list .news-list-item .icon {
        margin-left: 5px;
        width: 16px;
        height: 16px;
      }

      .hot {
        background: center/cover no-repeat url(./images/hot.svg);
      }

      .new {
        background: center/cover no-repeat url(./images/new.svg);
      }
    </style>
  </head>
  <body>
    <ul class="news-list">
      <li class="news-list-item">
        <a href="#">
          <span class="order">1</span>
          <p class="title">习近平结束对塔吉克斯坦的国事访问</p>
          <i class="icon hot"></i>
        </a>
      </li>
      <li class="news-list-item">
        <a href="#">
          <span class="order">2</span>
          <p class="title">习近平结束对塔吉克斯坦的国事访问</p>
          <i class="icon hot"></i>
        </a>
      </li>
      <li class="news-list-item">
        <a href="#">
          <span class="order">3</span>
          <p class="title">习近平结束对塔吉克斯坦的国事访问</p>
          <i class="icon new"></i>
        </a>
      </li>
      <li class="news-list-item">
        <a href="#">
          <span class="order">4</span>
          <p class="title">习近平结束对塔吉克斯坦的国事访问</p>
          <i class="icon hot"></i>
        </a>
      </li>
      <li class="news-list-item">
        <a href="#">
          <span class="order">5</span>
          <p class="title">习近平结束对塔吉克斯坦的国事访问</p>
          <i class="icon new"></i>
        </a>
      </li>
      <li class="news-list-item">
        <a href="#">
          <span class="order">6</span>
          <p class="title">习近平结束对塔吉克斯坦的国事访问</p>
          <i class="icon new"></i>
        </a>
      </li>
      <li class="news-list-item">
        <a href="#">
          <span class="order">7</span>
          <p class="title">习近平结束对塔吉克斯坦的国事访问</p>
          <i class="icon new"></i>
        </a>
      </li>
      <li class="news-list-item">
        <a href="#">
          <span class="order">8</span>
          <p class="title">习近平结束对塔吉克斯坦的国事访问</p>
          <i class="icon hot"></i>
        </a>
      </li>
      <li class="news-list-item">
        <a href="#">
          <span class="order">9</span>
          <p class="title">习近平结束对塔吉克斯坦的国事访问</p>
          <i class="icon new"></i>
        </a>
      </li>
    </ul>
  </body>
</html>
